<template>
  <div class="h-full relative">
    <div class="create-plan-wrapper border boder-red-400 h-full">
      <div class="header flex gap-2">
        <router-link :to="{ name: ERouterName.TASK }" class="flex">
          <ArrowLeft :stroke-width="1.75" />
          返回按钮
        </router-link>
      </div>
      <div class="content">
        <a-form ref="valueRef" layout="horizontal" :hideRequiredMark="true" :rules="rules" :model="planBody" labelAlign="left">
          <a-form-item name="name">
            <template #label> 计划名称 </template>
            <a-input style="background: black" placeholder="请输入计划名称" v-model:value="planBody.name" />
          </a-form-item>
          <a-form-item name="file_id" class="file_id">
            <template #label>
              <div class="flex justify-between w-full">
                <div>航线</div>
                <router-link :to="{ name: 'select-plan' }" @click="selectRoute"> 选择航线 </router-link>
              </div>
            </template>
            <template v-if="planBody.file_id">
              <div class="wayline-panel">
                <div class="title">
                  <a-tooltip :title="wayline.name">
                    <div class="pr10" style="width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden">
                      {{ wayline.name }}
                    </div>
                  </a-tooltip>
                  <div class="ml10">
                    <UserOutlined />
                  </div>
                  <a-tooltip :title="wayline.user_name">
                    <div class="ml5 pr10" style="width: 80px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden">
                      {{ wayline.user_name }}
                    </div>
                  </a-tooltip>
                </div>
                <div class="ml10 mt5" style="color: hsla(0, 0%, 100%, 0.65)">
                  <span>
                    <RocketOutlined />
                  </span>
                  <span class="ml5">{{ DEVICE_NAME[wayline.drone_model_key] }}</span>
                  <span class="ml10">
                    <CameraFilled style="border-top: 1px solid; padding-top: -3px" />
                  </span>
                  <span class="ml5" v-for="(payload, index) in wayline.payload_model_keys" :key="index">
                    {{ DEVICE_NAME[payload] }}
                  </span>
                </div>
                <div class="mt5 ml10" style="color: hsla(0, 0%, 100%, 0.35)">
                  <span class="mr10">更新时间 {{ new Date(wayline.update_time).toLocaleString() }}</span>
                </div>
              </div>
            </template>
          </a-form-item>

          <!-- 设备 -->
          <a-form-item v-model:value="planBody.dock_sn" name="dock_sn" class="dock_sn">
            <template #label>
              <div class="flex justify-between w-full">
                <div>设备</div>
                <router-link :to="{ name: 'select-plan' }" @click="selectDevice"> 选择设备 </router-link>
              </div>
            </template>
            <template v-if="planBody.dock_sn">
              <div class="panel" style="padding-top: 5px">
                <div class="title">
                  <a-tooltip :title="dock.nickname">
                    <div class="pr10" style="width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden">
                      {{ dock.nickname }}
                    </div>
                  </a-tooltip>
                </div>
                <div class="ml10 mt5" style="color: hsla(0, 0%, 100%, 0.65)">
                  <span>
                    <RocketOutlined />
                  </span>
                  <span class="ml5">{{ dock.children?.nickname ?? 'No drone' }}</span>
                </div>
              </div>
            </template>
          </a-form-item>
          <!-- <a-form-item v-if="planBody.dock_sn" style="margin-top: -15px">
            <div class="panel" style="padding-top: 5px">
              <div class="title">
                <a-tooltip :title="dock.nickname">
                  <div class="pr10" style="width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden">
                    {{ dock.nickname }}
                  </div>
                </a-tooltip>
              </div>
              <div class="ml10 mt5" style="color: hsla(0, 0%, 100%, 0.65)">
                <span>
                  <RocketOutlined />
                </span>
                <span class="ml5">{{ dock.children?.nickname ?? 'No drone' }}</span>
              </div>
            </div>
          </a-form-item> -->
          <!-- 任务类型 -->
          <a-form-item label="计划类型">
            <!-- <div style="white-space: nowrap"> -->
            <a-radio-group v-model:value="planBody.task_type" button-style="solid">
              <a-radio-button v-for="type in TaskTypeOptions" :value="type.value" :key="type.value">{{
                type.label
              }}</a-radio-button>
            </a-radio-group>
            <!-- </div> -->
          </a-form-item>
          <!-- execute date -->
          <a-form-item
            label="日期"
            v-if="planBody.task_type === TaskType.Timed || planBody.task_type === TaskType.Condition"
            name="select_execute_date"
            :labelCol="{ span: 23 }"
          >
            <a-range-picker
              v-model:value="planBody.select_execute_date"
              :disabledDate="(current: Moment) => current < moment().subtract(1, 'days')"
              format="YYYY-MM-DD"
              :placeholder="['开始时间', '结束时间']"
              style="width: 100%"
            />
          </a-form-item>
          <!-- execute time -->
          <a-form-item
            label="时间"
            v-if="planBody.task_type === TaskType.Timed || planBody.task_type === TaskType.Condition"
            name="select_execute_time"
            ref="select_execute_time"
            :labelCol="{ span: 23 }"
            :autoLink="false"
          >
            <div class="mb10 flex-row flex-align-center flex-justify-around" v-for="n in planBody.select_time_number" :key="n">
              <a-time-picker
                v-model:value="planBody.select_time[n - 1][0]"
                format="HH:mm:ss"
                show-time
                placeholder="开始时间"
                :style="planBody.task_type === TaskType.Condition ? 'width: 40%' : 'width: 82%'"
              />
              <template v-if="planBody.task_type === TaskType.Condition">
                <div><span style="color: white">-</span></div>
                <a-time-picker
                  v-model:value="planBody.select_time[n - 1][1]"
                  format="HH:mm:ss"
                  show-time
                  placeholder="结束时间"
                  style="width: 40%"
                />
              </template>
              <div class="ml5" style="font-size: 18px">
                <PlusCircleOutlined class="mr5" style="color: #1890ff" @click="addTime" />
                <MinusCircleOutlined
                  :style="planBody.select_time_number === 1 ? 'color: gray' : 'color: red;'"
                  @click="removeTime"
                />
              </div>
            </div>
          </a-form-item>
          <template v-if="planBody.task_type === TaskType.Condition">
            <!-- battery capacity -->
            <a-form-item label="电池电量达到时启动任务" :labelCol="{ span: 23 }" name="min_battery_capacity">
              <a-input-number
                class="width-100"
                v-model:value="planBody.min_battery_capacity"
                :min="50"
                :max="100"
                :formatter="(value: number) => `${value}%`"
                :parser="(value: string) => value.replace('%', '')"
              >
              </a-input-number>
            </a-form-item>
            <!-- storage capacity -->
            <a-form-item label="当存储级别达到（MB）时启动任务" :labelCol="{ span: 23 }" name="storage_capacity">
              <a-input-number v-model:value="planBody.min_storage_capacity" class="width-100"> </a-input-number>
            </a-form-item>
          </template>
          <!-- RTH Altitude Relative to Dock -->
          <a-form-item label="RTH相对于机场的高度（m）" :labelCol="{ span: 23 }" name="rth_altitude">
            <a-input-number v-model:value="planBody.rth_altitude" :min="20" :max="1500" class="width-100" required>
            </a-input-number>
          </a-form-item>
          <!-- Lost Action -->
          <a-form-item label="航线飞行中失联" :labelCol="{ span: 24 }" name="out_of_control_action">
            <div style="white-space: nowrap">
              <a-radio-group v-model:value="planBody.out_of_control_action" button-style="solid">
                <a-radio-button v-for="action in OutOfControlActionOptions" :value="action.value" :key="action.value">
                  {{ action.label }}
                </a-radio-button>
              </a-radio-group>
            </div>
          </a-form-item>
          <!-- <a-form-item class="width-100" style="margin-bottom: 40px"> -->
          <div class="footer">
            <a-button class="mr10" style="background: #3c3c3c" @click="closePlan">取消 </a-button>
            <a-button type="primary" @click="onSubmit" :disabled="disabled">确定 </a-button>
          </div>
          <!-- </a-form-item> -->
        </a-form>
      </div>
    </div>
    <div v-if="drawerVisible" class="drawer-wayline">
      <div class="h-full">
        <router-view :name="routeName" />
      </div>
      <div style="position: absolute; top: 15px; right: 10px">
        <a style="color: white" @click="closePanel">
          <CloseOutlined />
        </a>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, onUnmounted, reactive, ref, toRaw, UnwrapRef } from 'vue'
import {
  CloseOutlined,
  RocketOutlined,
  CameraFilled,
  UserOutlined,
  PlusCircleOutlined,
  MinusCircleOutlined
} from '@ant-design/icons-vue'
import { ArrowLeft } from 'lucide-vue-next'
import { ELocalStorageKey, ERouterName } from '@/types'
import { useMyStore } from '@/store'
import { WaylineType, WaylineFile } from '@/types/wayline'
import { Device, DEVICE_NAME } from '@/types/device'
import { createPlan, CreatePlan } from '@/api/wayline'
import { getRoot } from '@/root'
import { TaskType, OutOfControlActionOptions, OutOfControlAction, TaskTypeOptions } from '@/types/task'
import moment, { Moment } from 'moment-timezone'
import { RuleObject } from 'ant-design-vue/es/form/interface'
import { sessionStorage } from '@/utils/storage'

const root = getRoot()
const store = useMyStore()

const workspaceId = sessionStorage.get(ELocalStorageKey.WorkspaceId)!

const wayline = computed<WaylineFile>(() => {
  return store.state.waylineInfo
})

const dock = computed<Device>(() => {
  return store.state.dockInfo
})

const disabled = ref(false)

const routeName = ref('')
const planBody = reactive({
  name: '',
  file_id: computed(() => store.state?.waylineInfo.id),
  dock_sn: computed(() => store.state?.dockInfo.device_sn),
  task_type: TaskType.Immediate,
  select_execute_date: [moment().tz('Asia/Shanghai'), moment().tz('Asia/Shanghai')] as Moment[],
  select_time_number: 1,
  select_time: [[]] as Moment[][],
  rth_altitude: '',
  out_of_control_action: OutOfControlAction.ReturnToHome,
  min_battery_capacity: 90 as number,
  min_storage_capacity: undefined as number | undefined
})

const drawerVisible = ref(false)
const valueRef = ref()
const showError = ref(true)
const rules = {
  name: [
    { required: true, message: '请输入计划名称.' },
    { max: 20, message: '长度应为1到20' }
  ],
  file_id: [{ required: true, message: '请选择航线' }],
  dock_sn: [{ required: true, message: '请选择设备' }],
  select_execute_time: [
    {
      validator: async (rule: RuleObject, value: Moment[]) => {
        validEndTime()
        validStartTime()
        if (planBody.select_time.length < planBody.select_time_number) {
          throw new Error('选择时间')
        }
        validOverlapped()
      }
    }
  ],
  select_execute_date: [{ required: true, message: '选择日期' }],
  rth_altitude: [
    {
      validator: async (rule: RuleObject, value: string) => {
        if (!/^[0-9]{1,}$/.test(value)) {
          throw new Error('RTH高度要求高度')
        }
      }
    }
  ],
  min_battery_capacity: [
    {
      validator: async (rule: RuleObject, value: any) => {
        if (TaskType.Condition === planBody.task_type && !value) {
          throw new Error('请输入电池容量')
        }
      }
    }
  ],
  out_of_control_action: [{ required: true, message: '选择丢失操作' }]
}

function validStartTime(): Error | void {
  for (let i = 0; i < planBody.select_time.length; i++) {
    if (!planBody.select_time[i][0]) {
      throw new Error('选择开始时间')
    }
  }
}
function validEndTime(): Error | void {
  if (TaskType.Condition !== planBody.task_type) return
  for (let i = 0; i < planBody.select_time.length; i++) {
    if (!planBody.select_time[i][1]) {
      throw new Error('选择结束时间')
    }
    if (planBody.select_time[i][0] && planBody.select_time[i][1].isSameOrBefore(planBody.select_time[i][0])) {
      throw new Error('结束时间应晚于开始时间')
    }
  }
}
function validOverlapped(): Error | void {
  if (TaskType.Condition !== planBody.task_type) return
  const arr = planBody.select_time.slice()
  arr.sort((a, b) => a[0].unix() - b[0].unix())
  arr.forEach((v, i, arr) => {
    if (i > 0 && v[0] < arr[i - 1][1]) {
      throw new Error('Overlapping time periods.')
    }
  })
}

function onSubmit() {
  valueRef.value
    .validate()
    .then(() => {
      disabled.value = true
      const createPlanBody = { ...planBody } as unknown as CreatePlan
      console.log(planBody.select_execute_date, '选择')
      if (planBody.select_execute_date.length === 2) {
        createPlanBody.task_days = []
        for (let i = planBody.select_execute_date[0]; i.isSameOrBefore(planBody.select_execute_date[1]); i.add(1, 'days')) {
          createPlanBody.task_days.push(i.unix())
        }
      }
      const data = planBody.select_execute_date.map((item) => item.tz('Asia/Shanghai').format('YYYY-MM-DD'))
      console.log(data, 'data')
      createPlanBody.task_periods = []
      console.log(createPlanBody, '==================')
      if (TaskType.Immediate !== planBody.task_type) {
        for (let i = 0; i < planBody.select_time.length; i++) {
          const result = []
          result.push(planBody.select_time[i][0].unix())
          if (TaskType.Condition === planBody.task_type) {
            result.push(planBody.select_time[i][1].unix())
          }
          createPlanBody.task_periods.push(result)
        }
      }
      createPlanBody.rth_altitude = Number(createPlanBody.rth_altitude)
      if (wayline.value && wayline.value.template_types && wayline.value.template_types.length > 0) {
        createPlanBody.wayline_type = wayline.value.template_types[0]
      }
      console.log(createPlanBody, 'createPlanBody')
      createPlan(workspaceId, createPlanBody)
        .then((res) => {
          disabled.value = false
        })
        .finally(() => {
          closePlan()
        })
    })
    .catch((e: any) => {
      console.log('validate err', e)
    })
}

function closePlan() {
  root.$router.push('/' + ERouterName.TASK)
}

function closePanel() {
  drawerVisible.value = false
  routeName.value = ''
}

function selectRoute() {
  drawerVisible.value = true
  routeName.value = 'WaylinePanel'
}

function selectDevice() {
  drawerVisible.value = true
  routeName.value = 'DockPanel'
}

function addTime() {
  valueRef.value.validateFields(['select_execute_time']).then(() => {
    planBody.select_time_number++
    planBody.select_time.push([])
  })
}
function removeTime() {
  if (planBody.select_time_number === 1) return
  planBody.select_time_number--
  planBody.select_time.splice(planBody.select_time_number)
}
</script>

<style lang="scss">
.create-plan-wrapper {
  background-color: #232323;
  color: fff;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  .content {
    .ant-form-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      border: 1px solid rgba(255, 255, 255, 0.65);
      // background-color: rgba(48, 48, 48, 0.2);
      // padding: 6px;
      border-radius: 8px;
      justify-content: center;
    }
    .ant-form-item-label {
      height: vh(40);
      border-radius: 8px 8px 0 0;
      background: rgba(48, 48, 48, 0.2);
      border-bottom: 1px solid rgba(48, 48, 48);
      font-size: px2font(16);
      font-weight: 400;
      padding-left: 10px;
      color: rgba(255, 255, 255, 0.65);
      .ant-form-item-required {
        width: 100%;
      }
    }
    .ant-form-item-label > label::after {
      content: '';
    }
    .ant-form-item-control {
      padding: 8px;
      flex: auto;
      background-color: rgba(9, 9, 9);
      border-radius: 0 0 8px 8px;
    }
  }

  .header {
    height: 52px;
    border-bottom: 1px solid #4f4f4f;
    font-weight: 700;
    font-size: px2font(16);
    padding-left: 10px;
    display: flex;
    align-items: center;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .content {
    height: calc(100% - 54px);
    overflow-y: auto;

    form {
      margin: 10px;
    }

    form label,
    input,
    .ant-input,
    .ant-calendar-range-picker-separator,
    .ant-input:hover,
    .ant-time-picker .anticon,
    .ant-calendar-picker .anticon {
      background-color: #232323;
      color: #fff;
    }

    .ant-input-suffix {
      color: #fff;
    }

    .plan-timer-form-item {
      .ant-radio-button-wrapper {
        background-color: #232323;
        color: #fff;
        width: 33%;
        text-align: center;

        &.ant-radio-button-wrapper-checked {
          background-color: #1890ff;
        }
      }
    }
  }

  .footer {
    display: flex;
    padding: 10px 0;

    button {
      width: 45%;
      color: #fff;
      border: 0;
    }
  }
}

.wayline-panel {
  background: #3c3c3c;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  height: 90px;
  width: 95%;
  font-size: 13px;
  border-radius: 2px;
  cursor: pointer;

  .title {
    display: flex;
    color: white;
    flex-direction: row;
    align-items: center;
    height: 30px;
    font-weight: bold;
    margin: 0px 10px 0 10px;
  }
}

.panel {
  background: #3c3c3c;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  height: 70px;
  width: 95%;
  font-size: 13px;
  border-radius: 2px;
  cursor: pointer;

  .title {
    display: flex;
    color: white;
    flex-direction: row;
    align-items: center;
    height: 30px;
    font-weight: bold;
    margin: 0px 10px 0 10px;
  }
}
.drawer-wayline {
  position: absolute;
  left: vw(314);
  width: vw(330);
  height: 100%;
  float: right;

  top: 0;
  z-index: 1000;
  color: white;
  background: #282828;
}
.file_id {
  .ant-form-item-control {
    padding: 0px !important;
    height: vh(128);
  }
}
.dock_sn {
  .ant-form-item-control {
    padding: 0px !important;
    height: vh(106);
  }
}
</style>
